<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="f6f6f6">
      <banner class="banner"></banner>
    </div>
    <!-- 分类模块 start-->
    <section class="sort">
      <ul>
        <li>
          <router-link to="/product/日常用品">
            <h2>日常用品</h2>
            <p>查看详情</p>
          </router-link>
        </li>
        <li>
          <router-link to="/product/家具">
            <h2>家具系列</h2>
            <p>查看详情</p>
          </router-link>
        </li>
        <li>
          <router-link to="product/室内">
            <h2>家纺系列</h2>
            <p>查看详情</p>
          </router-link>
        </li>
      </ul>
    </section>
    <!-- 分类模块 end-->
    <!-- 定时器模块start -->
    <time-back></time-back>
    <!-- 定时器模块end -->
    <!-- 新品首发start -->
    <new-product> </new-product>
    <!-- 新品首发end -->
    <!-- 两个瓶子部分start -->
    <bottle></bottle>
    <!-- 两个瓶子部分end -->

    <!-- 热卖部分start -->
    <hot-buy> </hot-buy>
    <!-- 热卖部分end -->
    <!-- 小小动画start -->
    <div class="ant">
      <div class="centre">
        <ul class="clearfix">
          <li><img src="/img/index/animate1.webp" alt="" /></li>
          <li><img src="/img/index/animate2.webp" alt="" /></li>
          <li><img src="/img/index/animate3.webp" alt="" /></li>
          <li><img src="/img/index/animate4.webp" alt="" /></li>
          <li><img src="/img/index/animate5.webp" alt="" /></li>
          <li><img src="/img/index/animate1.webp" alt="" /></li>
          <li><img src="/img/index/animate2.webp" alt="" /></li>
          <li><img src="/img/index/animate3.webp" alt="" /></li>
          <li><img src="/img/index/animate4.webp" alt="" /></li>
          <li><img src="/img/index/animate5.webp" alt="" /></li>
        </ul>
      </div>
    </div>
    <!-- 小小动画end -->
    <!-- footer -->
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import Banner from "@/components/index/Banner.vue";
import NewProduct from "@/components/index/NewProduct.vue";
import Bottle from "@/components/index/Bottle.vue";
import HotBuy from "@/components/index/HotBuy.vue";
import TimeBack from "@/components/index/TimeBack.vue";
// import MyFlooter from "@/components/MyFlooter.vue";
import { mapMutations } from "vuex";

export default {
  components: {
    Banner,
    NewProduct,
    Bottle,
    HotBuy,
    TimeBack,
    // MyFlooter,
  },
  methods: {
    ...mapMutations(["setCounts"]),
  },

  mounted() {
    this.axios
      .get(`/users/count?uid=${this.$store.state.uid}`)
      .then((result) => {
        sessionStorage.setItem("counts", result.data.count);
        this.setCounts(result.data.count);
      });
    // console.log(this.$store.state.uid);
  },
};
</script>
<style>
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
.home a {
  outline: none;
}
/* 轮播图 */
.f6f6f6 {
  background-color: #f6f6f6;
  height: 700px;
  /* margin: 0 auto; */
}
.banner {
  width: 100%;
  height: 600px;
}
.sort {
  position: relative;
  top: -80px;
  width: 1200px;
  height: 260px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #fff;
  padding: 30px 25px;
}
/* <!-- 分类模块 --> */
.sort ul li {
  float: left;
  width: 353px;
  height: 200px;
  background-color: #f6f6f6;
  margin: 0 15px;
}
.sort ul li:nth-child(1) {
  background: url("/img/index/sort1.webp");
}
.sort ul li:nth-child(2) {
  background: url("/img/index/sort2.webp");
}
.sort ul li:nth-child(3) {
  background: url("/img/index/sort3.webp");
}
.sort ul li a {
  display: block;
  padding: 60px 0 0 40px;
  outline: 0;
}
.sort ul li a h2 {
  font-size: 16px;
  color: #000;
  padding: 0 0 5px;
}
.sort ul li a p {
  font-size: 13px;
  color: #aaa;
  padding: 2px;
}
.home .ant {
  /* width: 100%; */
  height: 178px;
  /* background-color: #eee; */
  margin-bottom: 80px;
}
.home .ant .centre {
  width: 1200px;
  height: 178px;
  margin: 0 auto;
  /* background-color: #333; */
  overflow: hidden;
}
.home .ant .centre ul {
  width: 200%;
  height: 178px;

  animation: 15s move linear infinite;
}
.home .ant .centre ul:hover {
  animation-play-state: paused;
}
.home .ant .centre ul li {
  float: left;
  width: 10%;
  height: 98px;
  /* background-color: #eee; */
  margin-top: 40px;
  text-align: center;
}
@keyframes move {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}
</style>